<template>
	<view>
		<view class="link-left" v-if="direction === 'left'">
			<image class="image" mode="widthFix" data-link="/pages/wateringMatch/wateringMatch" @click="handleWatering"
				src="http://39.99.135.50:8080/img/home/jsbs-new.png"></image>
			<button open-type="share">
				<image class="image" mode="widthFix" data-link="/pages/orchardIntroduction/orchardIntroduction"
					open-type="share" src="http://39.99.135.50:8080/img/home/zl-new.png"></image>
			</button>
			<image class="image" mode="widthFix" data-link="/pages/orchardIntroduction/orchardIntroduction"
				@click="handleJump" src="http://39.99.135.50:8080/img/home/gl-new.png"></image>
		</view>
		<view class="link-right" v-else>
			<view style="position: relative;" @click="handleSign">
				<image class="image" mode="widthFix" @click="handleJump"
					src="http://39.99.135.50:8080/img/home/qd-new.png"></image>
				<view class="gold-list" v-if="isSign">
					<image mode="widthFix" src="http://39.99.135.50:8080/img/home/hand-new.png"></image>
				</view>
			</view>

			<image class="image" mode="widthFix" data-link="/pages/blindBox/blindBox" @click="handleJump"
				src="http://39.99.135.50:8080/img/home/mh-new.png"></image>
			<image class="image" mode="widthFix" data-link="/pages/luckDraw/luckDraw" @click="handleJump"
				src="http://39.99.135.50:8080/img/home/cj-new.png"></image>
			<image class="image" mode="widthFix" data-link="/pages/introduce/introduce" @click="handleJump"
				src="http://39.99.135.50:8080/img/home/desc-new.png"></image>
			<image class="image" mode="widthFix" data-link="/pages/introduce/introduce" @click="handlePaly"
				src="http://39.99.135.50:8080/img/play/playIcon.png"></image>
		</view>
		<u-popup :show="show" @close="close" bgColor="transparent" @open="open">
			<WateringMatch @close="close" v-if="type==='1'" ref="wateringMatchRef" />
			<Sign :isSign="isSign" @close="close" v-if="type==='2'" @signSuccess="signSuccess"></Sign>
			<view class="sign-result" v-if="type==='3'">
				<image src="http://39.99.135.50:8080/img/sign/sign-12.png"></image>
				<view class="text">恭喜获得奖励</view>
				<view class="btn" @click="close">开心收下</view>
				<image src="http://39.99.135.50:8080/img/jsbs/bs-1.png" mode="widthFix"
					style="width:60rpx;margin-top: 60rpx;" @click="close"></image>
			</view>
			<view class="sign-result" v-if="type==='4'">
				<view class="play-list">
					<view class="item" @click="startPlay('wxedab64fed19eb5b4')">
						<view class="left-cont">
							<image src="http://39.99.135.50:8080/img/play/play2.png" mode="widthFix"
								style="width:90rpx;"></image>
							<view class="text">
								<view class="title">苹果贪吃蛇</view>
								<view class="desc">组队开黑，一起来吧</view>
							</view>
						</view>
						<view class="btn-play">立即玩</view>
					</view>
					<view class="item" @click="startPlay('wxa724db5806e2191f')">
						<view class="left-cont">
							<image src="http://39.99.135.50:8080/img//play/play1.png" mode="widthFix"
								style="width:90rpx;"></image>
							<view class="text">
								<view class="title">功夫荣耀之保卫苹果</view>
								<view class="desc">御屠龙 斩魔教</view>
							</view>
						</view>
						<view class="btn-play">立即玩</view>
					</view>
					<image src="http://39.99.135.50:8080/img/jsbs/bs-1.png" mode="widthFix"
						style="width:60rpx;margin-top: 60rpx;  margin: 0 auto;  display: block;" @click="close"></image>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import WateringMatch from '../pages/wateringMatch/wateringMatch';
	import Sign from '../pages/sign/sign'
	export default {
		name: 'module',
		components: {
			WateringMatch,
			Sign
		},
		props: {
			direction: {
				default: 'left',
				type: String
			},
			isSign: {
				default: false,
				type: Boolean
			}
		},
		data() {
			return {
				imageBaseURL: this.imageBaseURL,
				show: false,
				type: '1'
			};
		},
		methods: {
			// 跳转路由
			handleJump(e) {
				console.log(e);
				const {
					link
				} = e.currentTarget.dataset;
				console.log(link);
				if (link !== '') {
					uni.navigateTo({
						url: link
					});
				} else {
					uni.showToast({
						title: '程序猿正在马不停蹄的开发中呢，尽情期待！',
						icon: 'none',
						duration: 2000
					});
				}
			},
			handleWatering() {
				this.show = true
				this.$refs.wateringMatchRef.getMatch()
				this.type = '1'
			},
			handlePaly() {
				this.show = true
				this.type = '4'
			},
			startPlay(appId) {
				uni.navigateToMiniProgram({
					appId: appId, // 此为生活缴费appid
					// path:'main/pages/nativeindex/nativeindex',// 此为生活缴费首页路径
					envVersion: "release",
					success: res => {
						// 打开成功
						console.log("打开成功", res);
					},
					fail: err => {
						console.log(err);
					}
				});
			},
			handleSign() {
				this.show = true
				this.type = '2'
			},
			signSuccess() {
				this.type = '3'
			},
			open() {
				console.log('open')
			},
			close() {
				this.show = false
				this.$emit('updateData')
			},
			onShareAppMessage(res) {
				return {
					// title: "xxx欢迎你",
					// path: "pages_product/product_details",
					// imageUrl: "http://b267.photo.store.qq.com/psb?/V119XNCu1CAvfv/6Brnux0r2VHuu*2VDbY0AUDPOQ*nXcuRTE6c91zUY4w!/b/dAsBAAAAAAAA&bo=gALgAYAC4AEFGTo!&rf=viewer_4",
					// desc: "xxx哈哈哈",
					// content: "xxx集团",
					success(res) {
						uni.showToast({
							title: '分享成功'
						});
					},
					fail(res) {
						uni.showToast({
							title: '分享失败',
							icon: 'none'
						});
					}
				};
			}
		}
	};
</script>
<style></style>
<style lang="scss" scoped>
	uni-button {
		background-color: transparent !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	uni-button:after {
		border: none;
	}

	button {
		background-color: transparent !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	button:after {
		border: none;
	}

	.link-left {
		top: 10%;
		left: 20rpx;
		width: 13%;
		position: absolute;
		z-index: 99;

		.image {
			width: 100%;
			margin-top: 20rpx;
		}
	}

	.link-right {
		top: 7%;
		right: 20rpx;
		width: 13%;
		position: absolute;
		z-index: 99;

		.image {
			width: 100%;
			margin-top: 30rpx;
		}
	}

	.play-list {
		width: 600rpx;

		.item {
			background-color: #f5f5f5;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			margin-bottom: 30rpx;

			.left-cont {
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}

			.text {
				margin-bottom: 0;
				margin-left: 20rpx;

				.title {
					color: #333;
					font-size: 28rpx;
					font-weight: bold;
				}

				.desc {
					color: #999;
					font-size: 24rpx;
				}
			}

			.btn-play {
				width: 120rpx;
				height: 50rpx;
				line-height: 50rpx;
				background-color: #18BC37;
				font-size: 24rpx;
				border-radius: 10rpx;
				text-align: center;
				color: #fff;
			}
		}
	}

	.sign-result {
		width: 80%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 0 auto;

		image {
			width: 100%;
		}

		.text {
			font-size: 32rpx;
			color: #FFE44D;
			margin-bottom: 30rpx;
		}

		.btn {
			width: 70%;
			background: url('http://39.99.135.50:8080/img/sign/sign-8.png') no-repeat;
			background-size: 100% auto;
			text-align: center;
			// border-radius: 40rpx;
			height: 100rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #fff;
		}
	}

	.gold-list {
		width: 60%;
		position: absolute;
		bottom: 20rpx;
		right: 0%;
		right: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;

		image {
			width: 80rpx;
			animation: flicker 2.5s infinite;
		}

		@keyframes flicker {
			0% {
				transform: scale(0.5);
				opacity: 1;
			}

			50% {
				opacity: 1;
			}

			100% {
				transform: scale(1.2);
				opacity: 1;
			}
		}
	}
</style>
